<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<meta name="misapplication-tap-highlight" content="no" />
		<meta name="HandheldFriendly" content="true" />
		<meta name="MobileOptimized" content="320" />
		<title>课堂子页面</title>

		<link rel="stylesheet" href="../css/base.css" />
		<link rel="stylesheet" href="../css/mui.min.css">
		

		<style>
			.classroom-container {
				width: 100%;
				background-color: #FFFFFF;
				margin: 0 auto;
				margin-top: 10px;
				padding: 5px;
				padding-right: 3px;
				position: relative;
				height: 120px;
			}
			
			#leftContent {
				position: absolute;
			}
			
			#leftContent img {
				height: 100px;
				width: 100px;
			}
			
			#rightContent {
				margin-left: 120px;
				padding-top: 20px;
			}
			
			.div1 {
				background-color: #FFFFFF;
				padding: 5px;
				width: 100%;
			}
			
			.img1 {
				width: 30px;
				vertical-align: middle;
			}
			
			.img2 {
				width: 30px;
				float: right;
				margin: 5px;
			}
			
			.img3 {
				width: 50px;
				margin: 10px;
			}
			
			.img4 {
				width: 30px;
				float: left;
				margin: 5px;
			}
			
			.span1 {
				color: #00d5c5;
				font-size: larger;
			}
			
			.span2 {
				position: absolute;
				margin-top: 100px;
				color: #000000;
				margin-left: 84%;
			}
			
			.span3 {
				float: left;
				line-height: 35px;
			}
			
			.div2 {
				margin-top: 4%;
				background-image: url(../img/background-play.png);
				width: 100%;
				height: 120px;
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
			
			.div3 {
				width: 100%;
				height: 100%;
				background: #a3a3a3;
				filter: alpha(Opacity=60);
				-moz-opacity: 0.4;
				opacity: 0.4;
			}
			
			.div4 {
				width: 95%;
				position: absolute;
				margin-top: 20px;
			}
			
			.div5 {
				background-image: url(../img/play-2.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
				width: 70px;
				height: 70px;
				margin: 0 auto;
				text-align: center;
			}
			
			.div6 {
				margin-top: 2%;
				width: 100%;
				height: 35px;
			}
			
			.button1 {
				background-color: #00d5c5;
				float: right;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<div class="div1">
				<div>
					<img class="img1" src="../img/classroom-01.png" />
					<span class="span1">教材</span>
				</div>
			</div>
			<div id="videoDiv" style="width: 100%;position: relative;">
				<!--<div class="div1">
					<div class="div2">
						<div class="div3">
							<img class="img2" src="../img/download-ok.png" />

							<div class="div4">
								<div class="div5">
									<img class="img3" src="../img/play-1.png" />
								</div>
							</div>
							<span class="span2">44:11</span>
						</div>

					</div>
					<div class="div6">
						<span class="span3">钢琴学前课程准备</span>
						<button type="button" class="mui-btn mui-btn-outlined button1">收费<span style="color: #ff0000;"> ￥ 30</span></button>
					</div>
				</div>-->
				

			</div>

			<!--<div class="div1" style="margin-top: 2%;">
			<div class="div2">
				<div class="div3">
					<img class="img2" src="../img/download-no.png" />

					<div class="div4">
						<div class="div5">
							<img class="img3" src="../img/play-1.png" />
						</div>
					</div>
					<span class="span2">44:11</span>
				</div>

			</div>
			<div class="div6">
				<span class="span3">钢琴成人零基础</span>
				<button type="button" class="mui-btn mui-btn-outlined button1">收费<span style="color: #ff0000;"> ￥ 80</span></button>
			</div>
		</div>-->

			<div class="classroom-container">
				<div id="leftContent"><img src="../img/play-2.png"></div>
				<div id="rightContent">
					<div style="height: 50px;">
						<span>
					要学习弹钢琴首先要有钱买钢琴jdfgdfhhgfhfghg
				</span>
					</div>

					<div>
						<img class="img4" src="../img/download-no.png" />
						<button type="button" class="mui-btn mui-btn-outlined button1">收费<span style="color: #ff0000;"> ￥ 30</span></button>
					</div>
				</div>
			</div>

			<div class="div1" style="margin-top: 3%;">
				<div>
					<img class="img1" src="../img/classroom-01.png" />
					<span class="span1">真题PDF教材</span>
				</div>
			</div>
			
			<div id="pdfDiv" style="width: 100%;position: relative;">
			
			</div>

			<!--<div class="classroom-container">
				<div id="leftContent"><img src="../img/play-2.png"></div>
				<div id="rightContent">
					<div style="height: 50px;">
						<span>
					要学习弹钢琴首先要有钱买钢琴jdfgdfhhgfhfghg
				</span>
					</div>

					<div>
						<img class="img4" src="../img/download-no.png" />
						<button type="button" class="mui-btn mui-btn-outlined button1">收费<span style="color: #ff0000;"> ￥ 30</span></button>
					</div>
				</div>
			</div>-->
			
		</div>
		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script src="..js/local-keys.js"></script>
		<script src="../js/utils.js"></script>
		<script type="text/javascript" src="../js/sub-left.js"></script>
		<script>
			mui.init();
            showDetails();
            showPdfDetails();
			//初始化界面显示的数据
			function showDetails() {
                //显示视频内容
				var divImg = document.getElementById("videoDiv");
				var div = "";
				for(var i = 0; i < 3;i++) {
					
					//	div += '<img class="img1" src="'+ e[i] +'"><img onclick="deleteImg('+ i +')" class="img2" src="../img/error-icon.png" /></img>';				    				    	
					div += '<div class="div1" onclick="videoDetails('+ i +')"><div class="div2"><div class="div3"><img class="img2" src="../img/download-ok.png" /><div class="div4"><div class="div5"><img class="img3" src="../img/play-1.png" /></div></div><span class="span2">44:11</span></div></div><div class="div6"><span class="span3">钢琴学前课程准备</span><button type="button" class="mui-btn mui-btn-outlined button1">收费<span style="color: #ff0000;"> ￥ 30</span></button></div></div>';
				}
				divImg.innerHTML = div;
			}
			
			function videoDetails(i){
				printLog("打开了第"+i);
				mui.openWindow({
					url: "classroom-video.html"
			    });
			}
			
			//初始化界面显示真题pdf的数据
			function showPdfDetails() {
                //显示视频内容
				var divPdf = document.getElementById("pdfDiv");
				var div = "";
				for(var i = 0; i < 3;i++) {
					
					//	div += '<img class="img1" src="'+ e[i] +'"><img onclick="deleteImg('+ i +')" class="img2" src="../img/error-icon.png" /></img>';				    				    	
					div += '<div class="classroom-container" onclick="pdfDetails('+ i +')"><div id="leftContent"><img src="../img/play-2.png"></div><div id="rightContent"><div style="height: 50px;"><span>要学习弹钢琴首先要有钱买钢琴jdfgdfhhgfhfghg</span></div><div><img class="img4" src="../img/download-no.png" /><button type="button" class="mui-btn mui-btn-outlined button1">收费<span style="color: #ff0000;"> ￥ 30</span></button></div></div></div>';
				}
				divPdf.innerHTML = div;
			}
			
			function pdfDetails(i){
				printLog("打开了第"+i);
				mui.openWindow({
					url: "classroom-pdf-detail.html"
			    });
			}
			
			
		</script>

	</body>

</html>